<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地图选点</title>
		<link href="maplibre-gl.css" type="text/css" rel="stylesheet"/>
		<style>
			html,body{
				height:100%;
				padding:0;
				margin:0;
			}
			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script src="maplibre-gl.js"></script>
		<script src="uni.webview.1.5.5.js"></script>
		<script>
			window.onmessage= function(event) {
				console.log(event.data);
			}
			var map = new maplibregl.Map({
				container: "map",
				"version": 8,
				"id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
				style: {
					"version": 8,
					"id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
					"sources": {
					  "tdt-vec": {
						"type": "raster",
						"tiles": [`https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=93f1baa164397aa2b0f1bd863990ac81`],
						"tileSize": 256
					  },
					  "tdt-vec1": {
						"type": "raster",
						"tiles": [`https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=93f1baa164397aa2b0f1bd863990ac81`],
						"tileSize": 256
					  }
					},
					"layers": [{
					  "id": "tdt-tiles-layer",
					  "type": "raster",
					  "source": "tdt-vec",
					},
					{
					  "id": "tdt-tiles-layer1",
					  "type": "raster",
					  "source": "tdt-vec1",
					}]
				  },
				center: [128.04, 28.907],
				zoom: 3,
			});
			map.addControl(new maplibregl.NavigationControl());
			//地图点击事件
			map.on('click', function(e) {
				console.log(e)
				uni.webView.postMessage({
				  data: {
					lngLat: e.lngLat
				  }
				})
			});
			
			// Initialize the geolocate control.
			let geolocate = new maplibregl.GeolocateControl({
			  positionOptions: {
			      enableHighAccuracy: true
			  },
			  trackUserLocation: true
			});
			// Add the control to the map.
			map.addControl(geolocate);
		</script>
	</body>
</html>